<template name="cate-filter">
	<!-- grace filter start -->
	<view class="goodsFilterAre borderB">
		<view class="display flow calc grace-filter topFixed" :style="{'position': fixed?'fixed':'relative','top':top,'justify-content': isGoods?'space-between':'flex-start','z-index': isGoods?99:1}" id="grace-filter-header">
			<view class="display flow" v-if="isGoods" @click="showDrawerClick">
				<uni-icons :type="'list'" :color="themeColor" size="16"></uni-icons>
				<text class="title" style="">{{titleTxt}}</text>
			</view>
			<view class="display flow grace-filter-item">
				<text class="defaultTxt" :class="[isDefault?'themeColor':'']" @click="defaultBtn">默认</text>
				<view class="display flow items" :class="[activeIndex==index?'themeColor':'']" v-for="(item, index) in filters" :key="index" 
					:data-index="index" @tap="changeSort">
					<text class="text-df">{{ item.title }}</text>
					<view class="sortAre">
						<view class="up" :style="{'border-bottom-color': activeIndex == index && activeAscState?themeColor:''}"></view>
						<view class="down" :style="{'border-top-color': activeIndex == index && !activeAscState?themeColor:''}"></view>
					</view>
				</view>
			</view>
			<image :src="shapeValueImg" mode="widthFix" class="shapeImg" @tap="changeShape" v-if="showShape"></image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		fixed:{
			type : Boolean,
			default :function() {
				return false
			}
		},
		// initIndex:{
		// 	type : Number,
		// 	default :function() {
		// 		return -1
		// 	}
		// },
		isGoods: {
			type : Boolean,
			default :function() {
				return false
			}
		},
		titleTxt: {
			type: String,
			default: ''
		},
		// 显示的模板类型值，1：为单列，2：为多列
		shapeValue:{
			type : Number,
			default :function() {
				return 2
			}
		},
		// 是否显示模板类型选择
		showShape:{
			type : Boolean,
			default :function() {
				return false
			}
		}
	},
	computed:{
		shapeValueImg(){
			let img = this.shapeValue==2?'/static/images/icon/theme/switch1.png':'/static/images/icon/theme/switch2.png'
			return img
		}
	},
	data() {
		return {
			filters: [
				{title:'价格',value:1, initAscState:true},
				{title:'销量',value:2}
			],
			// 当前激活索引
			activeIndex: -1,
			// 默认升序
			activeAscState: false,
			isDefault: true,
			themeColor: this.global.themeColor
		}
	},
	// created: function(event) {
	// 	this.activeIndex = this.initIndex
	// },
	methods: {
		//排序更改事件
		changeSort:function(e){
			this.isDefault = false
			const index = parseInt(e.currentTarget.dataset.index);
			const curActiveItem = this.filters[index]
			if(this.activeIndex == index){
				//排序顺序颠倒
				this.activeAscState=!this.activeAscState
			} else {
				this.activeAscState = curActiveItem.initAscState||false
			}
			this.activeIndex = index
			const sortField = curActiveItem.value !== undefined ? curActiveItem.value:index
			var data={"sort":sortField,"order":this.activeAscState?1:-1,}
			// 1 降序 -1 升序
			this.$emit("sortChanged",data)
		},
		defaultBtn(){
			if(!this.isDefault){
				this.activeIndex = -1
				this.isDefault = true
				this.$emit('defaultBtn')
			}
		},
		showDrawerClick(){
			this.$emit("showDrawerClick");
		},
		changeShape(){
			this.$emit("shapeChanged",this.shapeValue)
		}
	}
};
</script>

<style lang="scss">
	.goodsFilterAre{
		@include width;
	}
	.grace-filter{
		color: $blackColor;
		.grace-filter-item{
			@include width(60%);
			.defaultTxt{
				@include font($fontSize - 4rpx);
			}
			.items {
				@include height(90rpx);
				.sortAre{
					@include margin(20rpx,'left');
					&>view{
						width: 0;
						height: 0;
					}
					.up{
						border: 10rpx solid transparent;
						border-bottom-color: $eightyGreyColor ;
					}
					.down{
						border: 10rpx solid transparent;
						border-top-color: $eightyGreyColor;
						margin-top: 10rpx;
					}
				}
				&>text {
					@include font($fontSize - 4rpx);
				}
			}
		}
		.title{
			@include font($fontSize - 4rpx,$themeColor);
			@include margin(10rpx,'left');
		}
		.shapeImg{
			@include widthHeight(40rpx);
		}
	}
</style>